<script setup lang='ts'>
import { openMallWindow } from '@/helper'
import { useOpen } from '@/pages/home/component/use-open'
import { useGetSecondaryList } from '@fl/api/mall-api'
import { cloneDeep } from 'lodash-es'

import { navList } from '../resource'

import finance from '/public/assets/finance.svg'
import mall from '/public/assets/mall.svg'
import order from '/public/assets/order.svg'
import recruitment from '/public/assets/recruitment.svg'
import supply from '/public/assets/supply.svg'

const { openNewWindow } = useOpen()

const { data: secondaryData, isLoading: secondaryLoading } = useGetSecondaryList()

function open(val: any) {
    if (val.path) {
        openNewWindow('/supply', {
            cat: val?.cid,
        })
    }
    else {
        openMallWindow()
    }
}

const catList = computed(() => {
    const result = cloneDeep(secondaryData.value?.slice(0, 5) ?? [])
    return result.map((item: any) => {
        return {
            ...item,
            path: 'supply',
            title: item.categoryName,
        }
    })
})

const tabs = computed(() => {
    return [
        {
            children: [
                {
                    path: '',
                    title: '招标公告',
                },
                {
                    path: '',
                    title: '中标公告',
                },
                {
                    path: '',
                    title: '其他公告',
                },
            ],
            path: '',
            title: '招采平台',
            url: recruitment,
        },
        {
            children: [
                {
                    path: '',
                    title: '标准品',
                },
                {
                    path: '',
                    title: '组合品',
                },
                {
                    path: '',
                    title: '其他',
                },
            ],
            path: '',
            title: '在线商城',
            url: mall,
        },
        {
            children: [
                {
                    path: '',
                    title: '订单管理',
                },
                {
                    path: '',
                    title: '收发货',
                },
            ],
            path: '',
            title: '订单履约',
            url: order,
        },
        {
            children: catList.value,
            path: '',
            title: '供应寻源',
            url: supply,
        },
        {
            children: [
                {
                    path: '',
                    title: '链安融',
                },
                {
                    path: '',
                    title: '订融宝',
                },
                {
                    path: '',
                    title: '融易通',
                },
                {
                    path: '',
                    title: '存融货',
                },
            ],
            path: '',
            title: '金融服务',
            url: finance,
        },
    ]
})
</script>

<template>
    <div class="my-20 w-full">
        <div class="mx-auto my-20 flex gap-20 h-500 w-1300">
            <ElSkeleton v-if="secondaryLoading"
                        :rows="5"
            />

            <template v-else>
                <div class="p-20 bg-#fff w-25% overflow-auto">
                    <div v-for="item in tabs"
                         :key="item.title"
                         class="mb-20"
                    >
                        <div class="mb-10 flex gap-10 items-center">
                            <img :src="item.url"
                                 alt=""
                            >

                            <div class="text-16 font-bold">
                                {{ item.title }}
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-10">
                            <div v-for="child in item.children"
                                 :key="child.title"
                                 class="text-#aaa truncate w-30% cursor-pointer hover:text-#da0004"
                                 :title="child.title"
                                 @click=" open(child)"
                            >
                                {{ child.title }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="h-full w-75%">
                    <el-carousel trigger="click"
                                 :interval="5000"
                                 class="h-full w-full"
                    >
                        <el-carousel-item v-for="item in navList"
                                          :key="item"
                        >
                            <el-image v-if="item"
                                      class="rounded-4 h-100% w-100% cursor-pointer"
                                      :src="item"
                                      fit="cover"
                            />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-carousel__container) {
    height: 100%;
}
</style>
